<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客登录页面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        /* 超小屏幕（手机，小于 768px） */
        /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            #slider-sub{
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 900px;
            }
            .mysearch{
                margin: 10px 0;
            }
            /*右边核心区域的设置*/
            .page_main{
                margin-left: 255px;
            }
        }
        .update{
            background: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 10px;
            margin: 10px;
            right: 45%;
            top: 50%;
        }
        .login{
            background: rgba(18, 18, 18,0.6);
            width: 500px;
            height: 300px;
            text-align: center;
            border-radius: 10px;
            position: absolute;
                left: 40%;
                top: 60%;
                margin: -50px 0 0 -45px;
        }
        body{
            background: url("https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/bg2.jpg");
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
<div style="margin: 0 auto">
    <div class="login">
        <h2 style="padding-top: 10px;color: #ffffff">欢迎登录南风博客</h2>
        <div style="max-width: 400px;margin: 0 auto">
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入账户">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
                </div>
                <div class="checkbox" style="display: flex;justify-content: space-between;color: #ffffff">
                    <div>
                        <label>
                            <input  type="checkbox">记住我
                        </label>
                    </div>
                    <div>
                        <a><span class="label label-danger">忘记密码</span></a>
                    </div>

                </div>
                <div style="margin-top: 30px">
                    <button style="margin-bottom: 20px;width: 90%" type="submit"  class="btn btn-warning"><a href="/client/blogIndex">立即登录</a></button>
                </div>
            </form>
        </div>
        <div style="display: flex;color: #ffffff;max-width: 500px;margin-left:40px">
            <div>
                <p>没有账户？</p>
            </div>
            <div style="padding-bottom: 10px">
                <a href="/client/blogRegister"><button  type="button" class="btn btn-primary btn-xs">立即注册</button></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>